import Rect from "./rect"

const screenWidth = window.innerWidth
const screenHeight = window.innerHeight

const BG_WIDTH = 240
const BG_HEIGHT = 320
const BG_AREA_WIDTH = 240
const BG_AREA_HEIGHT = 240

const img = new Image()
img.src = 'images/back.png'
const imgarea = new Image()
imgarea.src = 'images/area.png'

/**
 * 游戏背景类
 * 提供背景和游戏区域
 */
export default class BackGround {
  constructor(ctx, areaSize) {
    this.areaSize = areaSize
    this.calcArea()
    this.render(ctx)
  }

  calcArea() {
    let layoutWidth = Math.min(screenWidth, screenHeight)
    let margin = parseInt(layoutWidth / 20)
    this.areaSize = margin * 20
    this.cellSize = margin * 3
    this.left = (screenWidth - this.areaSize) / 2
    this.top = this.left + 130
    this.area = new Rect(margin + this.left, margin + this.top, this.areaSize - margin * 2, this.areaSize - margin * 2)
  }
  /**
   * 背景图重绘函数
   * 绘制两张图片
   */
  render(ctx) {
    ctx.drawImage(
      img,
      0,
      0,
      BG_WIDTH,
      BG_HEIGHT,
      0,
      0,
      screenWidth,
      screenHeight
    )

    ctx.drawImage(
      imgarea,
      0,
      0,
      BG_AREA_WIDTH,
      BG_AREA_HEIGHT,
      this.left,
      this.top,
      this.areaSize,
      this.areaSize
    )
  }
}